/**
 * 音柱设置
 */
import { FC, useEffect } from "react";
import { Form, Input, InputNumber, message, Modal, Radio } from "antd";
import { IPoundTypeSpeakList, postGbSystemSetSoundSet } from "../../api";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";

const LedParamsSet: FC<{
  voiceParamsSetData?: IPoundTypeSpeakList;
  handleCallBack: () => void;
  voiceParamsSetShow: boolean;
}> = ({ voiceParamsSetData, handleCallBack, voiceParamsSetShow }) => {
  const [form] = Form.useForm();
  const { validateFields, resetFields, setFieldsValue } = form;
  const handleOk = async () => {
    const values = await validateFields();
    const { code, msg } = (await postGbSystemSetSoundSet({
      ...values,
      id: voiceParamsSetData?.id,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("设置成功");
      resetFields();
      handleCallBack();
    } else {
      message.error(msg);
    }
  };

  const handleCancel = async () => {
    handleCallBack();
  };

  useEffect(() => {
    if (voiceParamsSetData) {
      setFieldsValue(voiceParamsSetData);
    }
  }, [voiceParamsSetData, setFieldsValue]);

  return (
    <>
      <Modal
        width={useWindowFontSize(520)}
        title={"设置参数"}
        open={voiceParamsSetShow}
        onOk={handleOk}
        onCancel={handleCancel}
        getContainer={false}
      >
        <Form
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          labelAlign="left"
        >
          <Form.Item
            label="HTTP接口地址"
            name="httpAddress"
            rules={[{ required: true, message: "请填写HTTP接口地址!" }]}
          >
            <Input placeholder="请填写HTTP接口地址" />
          </Form.Item>
          <Form.Item
            label="实例KEY"
            name="instanceKey"
            rules={[{ required: true, message: "请填写实例KEY!" }]}
          >
            <Input placeholder="请填写实例KEY" />
          </Form.Item>
          <Form.Item
            label="实例API_KEY"
            name="instanceApiKey"
            rules={[{ required: true, message: "请填写实例API_KEY!" }]}
          >
            <Input placeholder="请填写实例API_KEY" />
          </Form.Item>
          <Form.Item
            label="终端ID"
            name="terminalId"
            rules={[{ required: true, message: "请填写终端ID!" }]}
          >
            <Input placeholder="请填写终端ID" />
          </Form.Item>
          <Form.Item
            label="播放声音"
            name="voiceType"
            rules={[{ required: true, message: "请选择播放声音!" }]}
          >
            <Radio.Group
              options={[
                { value: "0", label: "男生" },
                { value: "1", label: "女生" },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="重复次数"
            name="repeatTimes"
            rules={[{ required: true, message: "请填写重复次数!" }]}
          >
            <InputNumber placeholder="请填写重复次数" />
          </Form.Item>
          <Form.Item
            label="重复播放间隔"
            name="repeatInterval"
            rules={[{ required: true, message: "请填写重复播放间隔!" }]}
          >
            <InputNumber placeholder="请填写重复播放间隔" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default LedParamsSet;
